05. Setting up ESLint in Gulp

Recap: Setting up ESLint in Gulp

We did quite bit in the previous video. Let's make sure we're on the same page!

First, we installed gulp-eslint into our workspace with the following command in the terminal:

npm install gulp-eslint

In our gulpfile.js file, we made sure this was noted:

const eslint = require('gulp-eslint');

We then went ahead and created a "lint" task as well:

gulp.task('lint', function() {
    return (
        gulp
            .src(['js/**/*.js'])
            // eslint() attaches the lint output to the eslint property
            // of the file object so it can be used by other modules.
            .pipe(eslint())
            // eslint.format() outputs the lint results to the console.
            // Alternatively use eslint.formatEach() (see Docs).
            .pipe(eslint.format())
            // To have the process exit with an error code (1) on
            // lint error, return the stream and pipe to failOnError last.
            .pipe(eslint.failOnError())
    );
});

Note that the above code was taken directly from gulp-eslint's npm page!

Finally, we modified our "default" task to take in our "lint" task and watch for .js files in the js folder (and its sub-folders).:

gulp.task('default', ['styles', 'lint'], function() {
    gulp.watch('sass/**/*.scss', ['styles']);
    gulp.watch('js/**/*.js', ['lint']);

    browserSync.init({
        server: './'
    });
});

How Are Things Looking?

After all the updates up to this point, your code in gulpfile.js should look something like this:

/*eslint-env node */

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const eslint = require('gulp-eslint');
const jasmineBrowser = require('gulp-jasmine-browser');

gulp.task('default', ['styles', 'lint'], function() {
    gulp.watch('sass/**/*.scss', ['styles']);
    gulp.watch('js/**/*.js', ['lint']);

    browserSync.init({
        server: './'
    });
});

gulp.task('styles', function() {
    gulp
        .src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions']
            })
        )
        .pipe(gulp.dest('./css'))
        .pipe(browserSync.stream());
});

gulp.task('lint', function() {
    return (
        gulp
            .src(['js/**/*.js'])
            // eslint() attaches the lint output to the eslint property
            // of the file object so it can be used by other modules.
            .pipe(eslint())
            // eslint.format() outputs the lint results to the console.
            // Alternatively use eslint.formatEach() (see Docs).
            .pipe(eslint.format())
            // To have the process exit with an error code (1) on
            // lint error, return the stream and pipe to failOnError last.
            .pipe(eslint.failOnError())
    );
});

gulp.task('tests', function() {
    return gulp
        .src('tests/spec/extraSpec.js')
        .pipe(jasmineBrowser.specRunner({ console: true }))
        .pipe(jasmineBrowser.headless({ driver: 'chrome' }));
});

// gulp.task('tests', function() {
//     gulp
//         .src('tests/spec/extraSpec.js')
//         .pipe(jasmineBrowser.specRunner())
//         .pipe(jasmineBrowser.server({ port: 3001 }));
// });

Alternatively, feel free to check out the course code here as well. Note that if you've already downloaded the ud892 course repository previously, the code in this lesson pertains to the Lesson 4 folder.